<template>
  <div>
    <top :f1="true" :f2="false"></top>
    <div class="info">
      <h4>{{ photoDetail.title }}</h4>
      <p>
        <span class="time"
          >发表时间: {{ photoDetail.add_time | dateFormat }}</span
        >
        <span class="click">点击: {{ photoDetail.click }}</span>
      </p>
      <hr />
      <ul>
        <li @click="preview(i)" v-for="(item, i) in photoArray" :key="i">
          <img :src="item.src" alt />
        </li>
      </ul>
      <div class="detail-content" v-html="photoDetail.content"></div>
      <my-comment :id="id"> </my-comment>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import Comment from '../Comment.vue'
export default {
  data() {
    return {
      photoDetail: {},
      photoArray: []
    }
  },
  components: {
    'my-comment': Comment
  },
  created() {
    this.id = this.$route.params.id
    this.getPhotoDetail()
    this.getPhotoArray()
  },
  methods: {
    async getPhotoDetail() {
      const { data: res } = await this.axios(
        '/api/getimageInfo/' + this.$route.params.id
      )
      if (res.status !== 0) return this.$toast('请求数据失败')
      this.photoDetail = res.message[0]
    },
    async getPhotoArray() {
      const { data: res } = await this.axios(
        '/api/getthumimages/' + this.$route.params.id
      )
      if (res.status !== 0) return this.$toast('请求数据失败')
      this.photoArray = res.message
    },
    preview(i) {
      console.log(i)
      const arr = []
      this.photoArray.forEach(item => {
        arr.push(item.src)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  position: relative;
  top: 25px;
  padding: 0 5px;
  h4 {
    text-align: center;
    color: #26a2ff;
    font-size: 15px;
  }
  p {
    overflow: hidden;
  }
}
.time {
  float: left;
  font-size: 13px;
  color: #8f8f94;
}
.click {
  float: right;
  font-size: 13px;
  color: #8f8f94;
}
ul{
  list-style: none;
  margin: 7px 0;
  padding: 0 5px;
  overflow: hidden;
  li {
    float: left;
    width: 33.3333%;
    padding: 5px;
    box-sizing: border-box;
    img {
      width: 100%;
      box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
